<template>
	<view>
		<!-- 消息通知页面 左右布局 -->
		<view class="message-list">
			<view class="message-list-item" @click="to_paper_list(0)">
				<view class="message-list-item-left">
					<u--image :showLoading="true" src="/static/images/message-notification.png" width="40px" height="40px" shape="circle"></u--image>
					<!-- 展示未读数量 -->
					<view class="message-number" v-if="unread_message_number != 0">
						{{ unread_message_number }}
					</view>
				</view>
				<view class="message-list-item-right">
					<view class="message-list-item-right-top">
						<text class="message-list-item-right-top-title">系统通知</text>
						<text class="message-list-item-right-top-time"></text>
					</view>
					<view class="message-list-item-right-bottom">
						<u--text size="12" color="#666" text="你有新消息" lines="1"></u--text>
					</view>
				</view>
			</view>
			<view class="message-list-item" v-for="(item, index) in message_list" :key="index" @click="to_paper_list(item.userid)">
				<view class="message-list-item-left">
					<u--image :showLoading="true" :src="item.usertx" width="40px" height="40px" shape="circle"></u--image>
					<!-- 展示未读数量 -->
					<view class="message-number" v-if="item.unread_quantity != 0">
						{{ item.unread_quantity }}
					</view>
				</view>
				<view class="message-list-item-right">
					<view class="message-list-item-right-top">
						<text class="message-list-item-right-top-title">{{ item.nickname }}</text>
						<text class="message-list-item-right-top-time">{{ item.msg_time }}</text>
					</view>
					<view class="message-list-item-right-bottom">
						<u--text size="12" color="#666" :text="item.content" lines="1"></u--text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			login_user_id: '', //登录用户id
			message_list: [],
			login_user_id: '',
			unread_message_number: 0,
			timer: null
		}
	},
	onShow() {
		this.login_user_id = uni.getStorageSync('userid');
		//未登录跳转到登录页面
		if (this.login_user_id == '') {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		} else {
			this.get_message_list();
			this.get_unread_message_notifications();
		}
	},
	onLoad() {
		// 获取登录用户id
		this.login_user_id = uni.getStorageSync('userid');
		if (this.login_user_id == '') {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			uni.navigateTo({
				url: '/pages/login/login'
			});
			return false;
		} else {
			this.get_message_list();
			this.get_unread_message_notifications();
			this.timer = setInterval(() => {
				this.get_message_list();
				this.get_unread_message_notifications();
			}, 5000);
		}
	},
	onPullDownRefresh() {
		//调用获取数据方法
		this.get_message_list();
		this.get_unread_message_notifications();
		setTimeout(() => {
			//结束下拉刷新
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	onHide() {
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	methods: {
		//获取消息列表
		async get_message_list() {
			let get_message_list = await this.$api.get_message_list({
				limit: 1000,
				page: 1
			});
			if (get_message_list.code == 1) {
				this.message_list = get_message_list.data;
			}
		},
		// 跳转到聊天页面
		to_paper_list(userid) {
			uni.navigateTo({
				url: '/pages/paper/paper-list?userid=' + userid
			})
		},
		async get_unread_message_notifications() {
			let get_unread_message_notifications = await this.$api.get_unread_message_notifications({});
			if (get_unread_message_notifications.code == 1) {
				this.unread_message_number = get_unread_message_notifications.data.count;
			}
		}
	}
}
</script>

<style lang="less">
.message-list {
	width: 100%;
	height: 100%;
	background-color: #fff;


	.message-list-item {
		width: 100%;
		margin-top: 20upx;
		padding-bottom: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;

		.message-list-item-left {
			width: 100px;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.message-number {
				width: 20px;
				height: 20px;
				background-color: red;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 12px;
				color: #fff;
				position: absolute;
				top: 0;
				left: 45px;
			}
		}

		.message-list-item-right {
			width: calc(100%);
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			margin-right: 20upx;

			.message-list-item-right-top {
				width: 100%;
				height: 30px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.message-list-item-right-top-title {
					font-size: 14px;
					color: #333;
				}

				.message-list-item-right-top-time {
					font-size: 12px;
					color: #999;
				}
			}

			.message-list-item-right-bottom {
				width: 70%;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.message-list-item-right-bottom-content {
					font-size: 14px;
					color: #666;
					/* 超出隐藏  只能有一行 */
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
				}
			}
		}
	}
}
</style>
